<template>
	<view>
		<uni-nav-bar @clickLeft="toBack" color="#555" leftIcon="arrowleft" title="发布动态" :fixed="true" :status-bar="true"></uni-nav-bar>

		<view class="trend-textarea">
			<textarea
				@keyboardheightchange="keyboard"
				placeholder-class="placeholder"
				:disabled="trendIinfo.text.length === 150"
				v-model="trendIinfo.text"
				placeholder="写点啥,抒发一下心情吧!"
			></textarea>
			<view class="count">({{ trendIinfo.text.length }}/150)</view>
		</view>

		<!-- 话题标签 -->
		<view class="topic-tags">
			<view class="icon iconfont icon-jiahao" @tap="changeTopic">切换话题</view>
			<view class="tag"># {{ selectTopic.topicName }}</view>
			<view class="icon iconfont icon-dingwei">{{ trendIinfo.city }}</view>
		</view>

		<!-- 图片内容 -->
		<view class=""><upload-images @changeImg="changImg" :total="6" :sourceTypeIndex="2" :sizeTypeIndex="2" :sourceImgs="[]"></upload-images></view>

		<button @tap="submit" v-show="buttonFlag" plain="true" class="flexButton">发布</button>
		<uni-popup :maskClick="false" ref="loding" type="center"><view class="lodingMessing">动态发布中...</view></uni-popup>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import uploadImages from '../../components/common/upload-images.vue';
import md5 from '../../js_sdk/zww-md5/w_md5.js';
import constant from '../../utils/Constant.js';
import showToast from '../../utils/ToastUtils.js';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	components: { uploadImages, md5, uniPopup },
	computed: {
		...mapState(['selectTopic'])
	},
	data() {
		return {
			buttonFlag: true,
			imgInfo: [],
			trendIinfo: {
				city: '',
				text: '',
				imgs: [],
				task: false
			},
			laodBall: {
				ballInfo: {
					ballType: 'all',
					ballSize: 150,
					// waveColor:'#FE9AB0',
					waveColor: '#FFFFFF',
					ballPadding: '5px'
				},
				loadText: '动态发布中',
				loadPercent: 0
			}
		};
	},
	methods: {
		toBack() {
			uni.switchTab({
				url: '../trend/trend'
			});
		},
		keyboard(e) {
			if (e.detail.height) {
				this.buttonFlag = false;
			} else {
				this.buttonFlag = true;
			}
		},
		changeTopic() {
			uni.navigateTo({
				url: `../topic/topic?type=${2}&task=${this.trendIinfo.task}`
			});
		},
		changImg(imgs) {
			imgs.forEach((img, index) => {
				this.imgInfo.push({
					name: `file${index}`,
					uri: img
				});
			});
		},
		submit() {
			if (!this.selectTopic) {
				return;
				showToast('换题不能为空');
			} else if (!this.trendIinfo.city) {
				showToast('请开启城市定位');
				return;
			} else if (this.imgInfo.length < 1 && !this.trendIinfo.text) {
				showToast('图片和文字信息必须其一');
				return;
			}
			this.buttonFlag = false;
			this.$refs.loding.open();
			let user = uni.getStorageSync(constant.user);
			let task = uni.uploadFile({
				url: constant.baseHttpUri + constant.pathUri.uploadFiles,
				files: this.imgInfo,
				header: {
					Authorization: `Bearer ${uni.getStorageSync('authToken')}`,
					'X-FILE-PATH': `${user.id}/trend`
				},
				success: res => {
					let data = JSON.parse(res.data);
					if (data.code === constant.dataCode.OK) {
						this.trendIinfo.imgs = data.data;
						this.addTrend();
					} else {
						this.laodBall.loadPercent = 0;
						showToast(data.msg);
						this.$refs.loding.close();
						this.buttonFlag = true;
					}
				}
			});

			task.onProgressUpdate(res => {
				this.laodBall.loadPercent = res.progress * 0.5;
			});
		},
		addTrend() {
			uni.request({
				url: constant.baseHttpUri + constant.pathUri.addTrend,
				header: constant.authHead(),
				data: {
					topicId: this.selectTopic.topicId,
					address: this.trendIinfo.city,
					trendsText: this.trendIinfo.text,
					trendsImgs: this.trendIinfo.imgs,
					task: this.trendIinfo.task
				},
				method: 'POST',
				success: res => {
					if (res.data.code === constant.dataCode.OK) {
						showToast('发布动态成功');
						this.laodBall.loadPercent = 100;
						this.$refs.loding.close();
						uni.switchTab({
							url: '../trend/trend'
						});
					} else {
						this.$refs.loding.close();
						showToast(res.data.msg);
					}
				},
				fail: r => {
					console.log(r);
				}
			});
		}
	},
	onLoad(options) {
		uni.getLocation({
			type: 'gcj02',
			geocode: true,
			success: res => {
				this.trendIinfo.city = res.address.city;
			}
		});
		this.trendIinfo.task = options.task === 'true' ? true : false;
	}
};
</script>

<style lang="less" scoped>
.trend-textarea {
	position: relative;
	margin: 15rpx 40rpx 0;

	textarea {
		padding: 10rpx;
		width: 100%;
		background-color: #f5f5f5;
		border-radius: 20rpx;
	}

	.placeholder {
		margin-left: 20rpx;
		margin-top: 20rpx;
		color: #adadad;
		font-size: 30rpx;
	}
	.count {
		position: absolute;
		bottom: 0;
		right: 25rpx;
		color: #adadad;
	}
}

.topic-tags {
	margin: 40rpx 40rpx 45rpx;
	display: flex;
	flex-direction: row;
	view {
		font-size: 24rpx;
		margin: 0 10rpx;
		border-radius: 20rpx;
		background: #d8d8d8;
		padding: 0 15rpx;
		color: #666666;
	}
	& > view:first-child {
		background: linear-gradient(270deg, #fc80a4 0%, #feb7ba 100%);
		color: #ffffff;
	}
	.tag {
		background: linear-gradient(270deg, #fc80a4 0%, #feb7ba 100%);
		color: #ffffff;
	}
	.icon-dingwei:before {
		font-size: 22rpx;
		margin-right: 5rpx;
	}
}
.flexButton {
	position: fixed;
	bottom: 20rpx;
	width: 60%;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(to right, #fcb5b9, #ff7ea5) !important;
	color: #ffffff;
	border: 0 !important;
	border-radius: 40rpx !important;
}
.lodingMessing {
	font-size: 46rpx;
	color: #ffffff;
	text-align: center;
}
</style>
